<template>
  <div class="q-pa-md q-gutter-sm">
    <q-editor
      v-model="editor"
      ref="editorRef"
      :toolbar="[
        ['token'],
        ['bold', 'italic', 'underline'],
        [
          {
            label: $q.lang.editor.formatting,
            icon: $q.iconSet.editor.formatting,
            list: 'no-icons',
            options: ['p', 'h3', 'h4', 'h5', 'h6', 'code'],
          },
        ],
      ]"
    >
      <template v-slot:token>
        <q-btn-dropdown
          ref="tokenRef"
          no-caps
          no-wrap
          unelevated
          flat
          :outline="false"
          size="sm"
          menu-anchor="bottom left"
          menu-self="top left"
          icon="colorize"
        >
          <t-list dense>
            <q-item
              tag="label"
              clickable
              @click="setColor('backColor', backColor)"
            >
              <q-item-section side>
                <q-icon name="format_color_fill" />
              </q-item-section>
              <q-item-section>
                <q-color
                  v-model="backColor"
                  default-view="palette"
                  no-header
                  no-footer
                  :palette="[
                    '#ffccccaa',
                    '#ffe6ccaa',
                    '#ffffccaa',
                    '#ccffccaa',
                    '#ccffe6aa',
                    '#ccffffaa',
                    '#cce6ffaa',
                    '#ccccffaa',
                    '#e6ccffaa',
                    '#ffccffaa',
                    '#ff0000aa',
                    '#ff8000aa',
                    '#ffff00aa',
                    '#00ff00aa',
                    '#00ff80aa',
                    '#00ffffaa',
                    '#0080ffaa',
                    '#0000ffaa',
                    '#8000ffaa',
                    '#ff00ffaa',
                    '#ffffffaa',
                    '#eeeeeeaa',
                    '#ddddddaa',
                    '#ccccccaa',
                    '#aaaaaaaa',
                    '#999999aa',
                    '#666666aa',
                    '#333333aa',
                    '#111111aa',
                    '#000000aa',
                  ]"
                  class="my-picker"
                />
              </q-item-section>
            </q-item>

            <q-item
              tag="label"
              clickable
              @click="setColor('foreColor', foreColor)"
            >
              <q-item-section side>
                <q-icon name="format_color_text" />
              </q-item-section>
              <q-item-section>
                <q-color
                  v-model="foreColor"
                  no-header
                  no-footer
                  default-view="palette"
                  :palette="[
                    '#ff0000',
                    '#ff8000',
                    '#ffff00',
                    '#00ff00',
                    '#00ff80',
                    '#00ffff',
                    '#0080ff',
                    '#0000ff',
                    '#8000ff',
                    '#ff00ff',
                    '#ffffff',
                    '#eeeeee',
                    '#dddddd',
                    '#cccccc',
                    '#aaaaaa',
                    '#999999',
                    '#666666',
                    '#333333',
                    '#111111',
                    '#000000',
                  ]"
                  class="my-picker"
                />
              </q-item-section>
            </q-item>
          </t-list>
        </q-btn-dropdown>
      </template>
    </q-editor>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const editorRef = ref(null);
    const tokenRef = ref(null);

    return {
      backColor: '#fff',
      foreColor: '#fff',

      editorRef,
      tokenRef,
      editor: ref('Customize it.'),

      setColor(cmd, name) {
        const edit = editorRef.value;
        tokenRef.value.hide();
        edit.caret.restore();
        edit.runCmd(cmd, name);
        edit.focus();
      },

      add(name) {
        const edit = editorRef.value;
        tokenRef.value.hide();
        edit.caret.restore();
        edit.runCmd(
          'insertHTML',
          `&nbsp;<div class="editor_token row inline items-center" contenteditable="false">&nbsp;<span>${name}</span>&nbsp;<i class="q-icon material-icons cursor-pointer" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">close</i></div>&nbsp;`,
        );
        edit.focus();
      },
    };
  },
};
</script>
<style lang="sass">
.editor_token
  background: rgba(0, 0, 0, .6)
  color: white
  padding: 3px
  &, .q-icon
    border-radius: 3px
  .q-icon
    background: rgba(0, 0, 0, .2)
</style>
